<template>
  <div class="TableDialog">
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      :before-close="handelClose"
      :close-on-click-modal="false"
      append-to-body
    >
      <div class="report-title-search">
        <vxe-input
          v-model="filterName"
          type="search"
          placeholder="试试全表搜索"
          @keyup="searchEvent"
        />
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in tabsList" :key="index" :label="item.label" :name="item.id" />
      </el-tabs>
      <div>
        <dynamicTables :table-data="tableData" :table-header="columnList" :table-loading="tableLoading" />
      </div>
    </el-dialog>

  </div>

</template>

<script>
import dynamicTables from './components/DynamicTables1.vue';
import { commonMenthod } from '@/api/taskPage/index.js';
export default {
  components: {
    dynamicTables
  },
  data() {
    return {
      originTableData: [],
      filterName: '',
      cEnterpriseName: '',
      iProgramguids: '',
      tableLoading: false,
      columnList: [],
      headerList: [],
      tableData: [],
      dialogVisible: false,
      title: '预算明细表',
      width: '90%',
      activeName: 0,
      tabsList: [
        {
          id: '0',
          label: '分口数'
        },
        {
          id: '1',
          label: '预算数'
        },
        {
          id: '2',
          label: '直拨数'
        },
        {
          id: '3',
          label: '计划批复数'
        },
        {
          id: '4',
          label: '中心支付数'
        }
      ],
      iVouchIdList: ['8095', '8091', '8092', '8093', '8094']
    };
  },
  methods: {
    searchEvent() {
      // 去前后空格 大小写 字符串
      const filterName = (this.filterName + '').trim().toLowerCase();
      if (filterName) {
        const filterRE = new RegExp(filterName, 'gi');
        const searchProps = [];
        this.columnList.map(o => {
          searchProps.push(o.value);
        });
        const rest = this.originTableData.filter(item => searchProps.some(key => (item[key] + '').toLowerCase().indexOf(filterName) > -1));
        this.tableData = rest.map(row => {
          const item = Object.assign({}, row);
          searchProps.forEach(key => {
            item[key] = (item[key] + '').replace(filterRE, match => `<span class="keyword-lighten">${match}</span>`);
          });
          return item;
        });
      } else {
        this.tableData = this.originTableData;
      }
    },
    handleClick() {
      // 切换的时候调用接口
      this.getHeader();
    },
    getHeader() {
      this.tableLoading = true;
      const url = '/xProduce/header';
      const params = {
        iVouchId: this.iVouchIdList[Number(this.activeName)]
      };
      commonMenthod(url, params).then(res => {
        if (res.success) {
          this.columnList = res.data.columnList;
          this.headerList = res.data.headerList;
        } else {
          this.columnList = [];
          this.headerList = '';
        }
        // 获取表体数据
        setTimeout(() => {
          this.getData();
        }, 200);
      });
    },
    getData() {
      const url = '/xProduce/data';
      const params = {
        columnList: this.columnList,
        headerList: this.headerList,
        moneyType: '1',
        year: localStorage.getItem('chooseYear'),
        month: '',
        orderBy: '',
        pageType: '0',
        filterList: [
          {
            'value': this.cEnterpriseName,
            'col': 'CENTERPRISENAME1',
            'symbol': 'eq'
          },
          {
            'value': this.iProgramguids,
            'col': 'IPROGRAMGUID',
            'symbol': 'in'
          }
        ]
      };
        // 获取表体数据
      commonMenthod(url, params).then(res => {
        setTimeout(() => {
          this.tableLoading = false;
        }, 300);
        if (res.success) {
          if (res.data === '') {
            this.tableData = [];
          } else {
            this.tableData = res.data;
          }
        } else {
          this.tableData = [];
        }
        this.originTableData = this.tableData;
      });
    },
    handelClose() {
      this.dialogVisible = false;
    }
  }

};
</script>

<style lang='scss' scoped >
 .TableDialog /deep/ .el-dialog {
  margin-top: calc(5vh) !important
}
.report-title-search{
  text-align: right
}

</style>
